// 引入defineStore
import { defineStore } from "pinia";
import { reactive } from "vue";
import axios from 'axios'
import { nanoid } from 'nanoid'

// 调用defineStore  defineStore接收两个值('变量名'，obj)
// export const useTalkStore = defineStore('talk', {
//     // state配置项  真正存储数据的地方
//     state() {
//         return {
//             talkList:JSON.parse(localStorage.getItem('talkList') as string) || []
//         }
//     },
//     actions:{
//     async getATalk(){
//       // 发请求，下面这行的写法是：连续解构赋值+重命名
//       let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
//       // 把请求回来的字符串，包装成一个对象
//       let obj = {id:nanoid(),title}
//       // 放到数组中
//       this.talkList.unshift(obj)
//     }
//   },

// })
// stroe组合式写法  defineStore(变量名, () => {})，其实就是把传入的对象换成函数  
export const useTalkStore = defineStore('talk', () => {
  const talkList = reactive(JSON.parse(localStorage.getItem('talkList') as string) || [])
  async function getATalk(){
    // 发请求，下面这行的写法是：连续解构赋值+重命名
    let { data: { content: title } } = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    // 把请求回来的字符串，包装成一个对象
    let obj = { id: nanoid(), title }
    // 放到数组中
    talkList.unshift(obj)
  }

  // 一定要把state、actions、getters里的数据和方法return出去
  return {
    talkList,getATalk
  }
})